<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7" :offset="0">
        <el-input v-model="queryFrom.query" :placeholder="$t('table.placeholder')" size="normal" clearable></el-input>
      </el-col>
      <el-button type="primary" :icon="Search">{{ $t('table.search') }}</el-button>
      <el-button type="primary" size="default">{{ $t('table.adduser') }}</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="(item, index) in options"
        :key="index">
        <template #default v-if="item.prop === 'action'">
          <el-button type="primary" size="small">primary</el-button>
          <el-button type="danger" size="small">danger</el-button>
          <el-button type="warning" size="small">warning</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { options } from './options.js'
const queryFrom = ref({
  query: '',
  pagenum: 1,
  pagesize: 2
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>

<style lang='scss' scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
</style>
